<template>
  <!-- 数据变化折线图 -->
  <div class="charts_wrap">
    <div class="charts_main" ref="lineChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      chart: null,
    };
  },
  props: {
    chartData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler: function (val) {
        this.$nextTick(() => {
          if (val?.length) {
            this.initChartFn();
          }
        });
      },
    },
  },
  mounted() {
    this.initChartFn();
  },
  methods: {
    initChartFn() {
      if (!this.chart) {
        let dom = this.$refs.lineChart;
        this.chart = echarts.init(dom);
      }
      this.setChartOptionsFn();
    },
    setChartOptionsFn() {
      if (!this.chartData[0]) {
        return false;
      }
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          itemWidth: 16, // 设置图例项宽度
          itemHeight: 16, // 设置图例项高度
          textStyle: {
            color: "#E5F9FF",
            fontSize: 12,
            verticalAlign: "middle",
            height: 50,
            padding: [10, 100, 0, 0],
          },
          icon: "circle",
          data: [
            "水声信号数据",
            "处理结果数据",
            "信号特征数据",
            "环境要素数据",
            "态势数据",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.chartData[0].xData,
          axisLabel: {
            color: "#E5F9FF", // 设置 x 轴标签文字颜色为黑色
          },
          axisLine: {
            lineStyle: {
              color: "#A0DFFA", // 设置 y 轴坐标轴颜色为绿色
            },
          },
          axisTick: {
            show: false, // 是否显示刻度线
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#E5F9FF", // 设置 y 轴标签文字颜色为深灰色
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#A0DFFA", // 设置 y 轴坐标轴颜色为绿色
            },
          },
          splitLine: {
            show: true, // 是否显示分割线
            lineStyle: {
              color: "#1FBAFD", // 分割线颜色
              type: "dashed", // 线型，可选为：'solid' | 'dashed' | 'dotted'
              width: 1, // 线宽
              opacity: 0.5, // 透明度，范围：0 ~ 1
            },
          },
        },
        series: [
          {
            name: "水声信号数据",
            type: "line",
            smooth: true,
            showSymbol: false,
            data: this.chartData[0].arr1Data,
          },
          {
            name: "处理结果数据",
            type: "line",
            smooth: true,
            showSymbol: false,
            data: this.chartData[0].arr2Data,
          },
          {
            name: "信号特征数据",
            type: "line",
            smooth: true,
            showSymbol: false,
            data: this.chartData[0].arr3Data,
          },
          {
            name: "环境要素数据",
            type: "line",
            smooth: true,
            showSymbol: false,
            data: this.chartData[0].arr4Data,
          },
          {
            name: "态势数据",
            type: "line",
            smooth: true,
            showSymbol: false,
            data: this.chartData[0].arr5Data,
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.charts_wrap {
  width: 100%;
  height: 100%;

  .charts_main {
    width: 100%;
    height: 100%;
  }
}
</style>
